<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <style>
        .list-group-item {
            position: relative;
        }

        .btn {
            width: 80px;
            height: 30px;
            position: absolute;
            right: 0;
            bottom: 5px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="page-header">
            <h1>路由组件的练习</h1>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <!-- Nav tabs -->
            <ul class="nav nav-stacked col-md-6" role="tablist">
                <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
                        data-toggle="tab">Home</a></li>
                <li role="presentation"><a href="#About" aria-controls="About" role="tab" data-toggle="tab">About</a>
                </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content col-md-6">
                <div role="tabpanel" class="tab-panel active" id="home">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#Message" aria-controls="Message" role="tab"
                                data-toggle="tab">Message</a></li>
                        <li role="presentation"><a href="#News" aria-controls="News" role="tab"
                                data-toggle="tab">News</a></li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-panel active" id="Message">
                            <ul class="list-group">
                                <li class="list-group-item">
                                    <a href="##">message01</a>
                                </li>
                                <li class="list-group-item">
                                    <a href="##">message02</a>
                                </li>
                                <li class="list-group-item">
                                    <a href="##">message03</a>
                                </li>
                            </ul>
                            <div class="alert alert-success" role="alert">
                                <ul class="list-group">
                                    <li class="list-group-item">message01</li>
                                    <li class="list-group-item">message02</li>
                                    <li class="list-group-item">message03</li>
                                    <li class="list-group-item">message04</li>
                                </ul>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-panel" id="News">
                            <ul class="list-group">
                                <li class="list-group-item">
                                    news1
                                    <button type="button" class="btn btn-primary" data-toggle="button"
                                        aria-pressed="false" autocomplete="off">
                                    </button>
                                </li>
                                <li class="list-group-item">
                                    news2
                                    <button type="button" class="btn btn-primary" data-toggle="button"
                                        aria-pressed="false" autocomplete="off">
                                    </button>
                                </li>
                                <li class="list-group-item">
                                    news3
                                    <button type="button" class="btn btn-primary" data-toggle="button"
                                        aria-pressed="false" autocomplete="off">
                                    </button>
                                </li>
                            </ul>
                            <div class="alert alert-success" role="alert">
                                <ul class="list-group">
                                    <li class="list-group-item">news1</li>
                                    <li class="list-group-item">news2</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-panel" id="About">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            Basic panel example
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>